<template>
	<view class="page">
		<!-- 背景图片 -->
		<view class="bg">
			<image :src="imgPrefix('/static/image/course_record_bg.png')" lazy-load></image>
		</view>
		<view class="content">
			<view class="f_28 f_normal title">{{userIdentity==0?'课程记录':'授课记录'}}</view>
			<view class="total-hours">
				<view class="f_80 font_bebas">{{totalHours}}</view>
				<view class="f_24 opacity-white">总课时 (小时）</view>
			</view>
			<view class="dis-flex flex-x-between">
				<view class="flex-box t-c">
					<view class="f_48 m-b-4 font_bebas">{{days}}</view>
					<view class="f_24 opacity-white">积累天数</view>
				</view>
				<view class="flex-box t-c m-l-r170">
					<view class="f_48 m-b-4 font_bebas">{{orderCount}}</view>
					<view class="f_24 opacity-white">积累课次</view>
				</view>
				<view class="flex-box  t-c">
					<view class="f_48 m-b-4 font_bebas">{{subject}}</view>
					<view class="f_24 opacity-white">{{userIdentity==0?'学习语种':'积累订单'}}</view>
				</view>
			</view>
				<view class="list-box navy_blue">
					<view class="default_icon dis-flex flex-y-center flex-dir-column" v-if="defaultStatus">
						<image :src="imgPrefix('/static/image/default_icon.png')" mode=""></image>
						<view class="f_24 gery">暂无任何数据</view>
					</view>
					<mescroll-uni
						v-else
						ref="mescrollRef"
						offset="80"
						@init="mescrollInit"
						@down="downCallback"
						:up="upOption"
						@up="upCallback"
					>
						<view v-for="(item,index) in listBox" :key="index" class="item dis-flex">
							<view class="m_r_16">
								<image v-if="userIdentity==0" :src="item.teacher_course.teacher.headeravatar" mode="lazy-load" lazy-load></image>
								<image v-else :src="item.user.avatar" mode="lazy-load" lazy-load></image>
							</view>
							<view class="flex-box dis-flex flex-dir-column flex-x-center">
								<view class="dis-flex flex-x-between">
									<view class="f_28" v-if="userIdentity==0">{{item.teacher_course.title}}{{item.teacher_course.teacher.nickname}}</view>
									<view class="f_28" v-if="userIdentity==1">{{item.user.nickname}}</view>
									<view class="f_28">{{item.teacher_course.hour}}小时/课次</view>
								</view>
								<view class="dis-flex flex-x-between m-t-12">
									<view class="f_24 date"><text>{{item.date}}</text>{{item.time}}</view>
									<view class="f_28 language_type_text"  :class="'lan_' + setLangeClass(item.teacher_course.language.title)">{{item.teacher_course.language.title}}</view>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			
		</view>
	</view>
</template>

<script>
import {getLangeClass} from '@/static/uitls/changeData.js'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'; // 上下拉加载
import API from '@/static/api/index.js';
const app = getApp();
	export default{
		mixins: [MescrollMixin],
		name:'index',
		data(){
			return{
				defaultStatus:false,//是否缺省
				mescroll:'',
				isShowNoMore:false,
				upOption: {
					page: {
						num: 0,
						size:10
					},
					isBounce:true,
					textLoading: '加载中',
					textNoMore: '',
					// empty: {
					// 	tip: '~ 暂无数据 ~', // 提示
					// 	btnText: '去看看'
					// }
				},
				total:0,//总条数
				totalHours:0,//总课时
				days:0,//积累天数
				orderCount:0,//积累课次
				subject:0,//学习语种
				listBox:[]
			}
		},
		onLoad(){
			// this._courseLog()
		},
		methods:{
			// http://www.mescroll.com/uni.html?v=20200710#begin
			setLangeClass(title){
				return getLangeClass(title)
			},
			downCallback(mescroll) {
				// mixin里有,直接用里面的
				app._log('下拉事件');
				mescroll.resetUpScroll();
			},
			// 置底事件
			upCallback(mescroll) {
				this._courseLog()
				// mescroll.endUpScroll(true)
				
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			_courseLog(){
				let {mescroll,userIdentity} = this 
				let send = userIdentity==0?API.courseLog({page:mescroll.num,size:mescroll.size}):API.getTeacherCourse({page:mescroll.num,size:mescroll.size})
				send.then(({code,data,msg})=>{
					app._log("code,,",code)
					this.defaultStatus=false
					if(code==1){
						this.totalHours = userIdentity==0?data.hour_count:data.hours//总课时
						app._log(",,,",this.totalHours,data.hour_count)
						this.days = userIdentity==0?data.day_count:data.days//积累天数
						this.subject = userIdentity==0?data.language_course_count:data.order_count//学习语种/积累订单
						this.orderCount=data.course_count//积累课次
						
						this.total=data.total
						//设置列表数据（判断是否第一页，是第一页的话就赋值，不是第一页的话就合并数组）
						let list = mescroll.num == 1?[]:this.listBox;
						this.listBox=list.concat(userIdentity==0?data.log:data.courses);
							mescroll.endByPage(userIdentity==0?data.log.length:data.courses.length, this.total); 
							setTimeout(()=>{ 
								 if(this.listBox.length<this.total){
									 this.isShowNoMore = false;
									 mescroll.endUpScroll(this.isShowNoMore);
								 }else{
									 this.isShowNoMore = true;
									 mescroll.endUpScroll(this.isShowNoMore);
								 }
							 },1000)
					}else if(code==405&&mescroll.num == 1){
						this.defaultStatus=true
						this.listBox=[]
					}else{
						this.showToast(msg,'none')
					}
				})
			}
		}
	}
</script>
<style>
	.mescroll-uni-fixed{
		position:absolute!important;
	}
</style>
<style scoped lang="scss">
	
	.m-l-r170{
		margin: 0 170rpx;
	}
	// 背景图
	.bg{
		position: relative;
		image{
			position: absolute;
			top: 0;
			width: 750rpx;
			height: 574rpx;
		}
	}
	.f_80{
		font-size: 80rpx;
	}
	//内容
	.content{
		padding: 0 48rpx;
		position: relative;
		z-index: 1;
		color: #ffffff;
		.title{
			padding:30rpx 0 20rpx 0;
		}
		.opacity-white{
			color: rgba(225,225,225, 0.6);
		}
		.m-b-4{
			margin-bottom: 4rpx;
		}
		.total-hours{
			padding-bottom: 46rpx;
		}
		.list-box{
			position: relative;
			background-color: #ffffff;
			padding: 12rpx 0;
			box-shadow: 0rpx 0rpx 24rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 24rpx;
			margin-top: 34rpx;
			height:calc(100vh - 450rpx);
			// box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 0, 0, 0.02);
			// border-radius: 24rpx;
			.item{
				padding: 24rpx 0;
				margin: 0 24rpx;
				border-bottom: 1px solid rgba(237,237,237,0.7);
				image{
					width: 96rpx;
					height: 96rpx;
					border-radius: 8rpx;
				}
			}
			.date{
				color: #999999;
				text{
					margin-right: 10rpx;
				}
			}
			.m-t-12{
				margin-top: 12rpx;
			}
		}
	}
	.item:last-child{
		border-bottom:0px !important;
	}
	
	.default_icon{
		width: 100%;
		image{
			width: 396rpx;
			height: 396rpx;
			margin-top: 100rpx;
		}
	}
</style>
